<template>
    <view>
        <view v-if="(CashData.isShowDistributionButton||isShowBtn)">
            <view class="m-endorsementBox">
                <view class="m-endorsementBox-bg">
                </view>
                <view class="m-userinfo">
                    <view class="m-photo">
                        <image lazy-load :src="(UserInfo.user_avatar)"></image>
                    </view>
                    <view class="m-text">
                        <label>{{sprintf(__('我是%s'), UserInfo.user_nickname)}}</label>
                        <text>{{sprintf(__('我为%s代言'), StoreName)}}</text>
                    </view>
                </view>
            </view>
            <view class="u-toptip" v-if="(ProductInfo!=null)">
                <view class="u-loadmore u-loadmore-line">
                    <text class="u-loadmore-tips">{{__('为您推荐')}}</text>
                </view>
            </view>
            <view class="m-product-list" v-if="(ProductInfo!=null)">
                <navigator open-type="redirect" :url="(ProductUrl) + '?pid=' + (ProductInfo.pid) + '&uid=' + (UserBase.user_id)"
                           class="m-product-item">
                    <view class="m-product-img">
                        <image lazy-load :src="(ProductInfo.ppic)" mode="aspectFill" />
                    </view>
                    <view class="m-product-info">
                        <view class="m-product-name">
                            <label>{{ProductInfo.pname}}</label>
                        </view>
                        <view class="m-product-price">
                            <label>{{__('￥')}}</label>{{ProductInfo.pprice}}
                            <button class="u-btn u-btn-default">{{buyname}}</button>
                        </view>
                    </view>
                </navigator>
            </view>
            <image lazy-load v-if="(ProductInfo==null)" :src="(invite_info.qrcode)" class="QRCodeBOx" mode="widthFix"></image>

            <view class="m-text-box" v-if="(RuleEnabled&&flag==false)">
                <view @click="showTip">
                    <label class="iconfont icon-14052218"></label>{{__('推广规则')}}
                </view>
                <view>
                    <view>
                        {{sprintf(__('当你的粉丝在店铺内支付订单后，订单中的所有商品，都有相应的收益比例：一级粉丝 %s%% ，二级粉丝 %s%% 。将支付订单金额和收益比例相乘后，累计计算出你此单的总收益。* 注： - 不计算收益的内容：运费、优惠券、关税，以及收益比例为0的商品；'), Level1Discount, Level2Discount)}}
                        {{__(' - 如果发生了退货退款，需要按照实际退货数量对收益进行相应的扣除；- 按照国家法律规定，当你的月累计收入达到相关税金起征点后，商家会为你代缴税款，你的收益将是税后收入；')}}
                    </view>
                </view>
            </view>
            <view class="m-text-box" v-else>
                <view @click="showTip">
                    <label class="iconfont icon-14052218"></label>{{__('推广规则')}}
                </view>
                <view>
                    <view>{{__('成功邀请一位好友，可获积分奖励')}}</view>
                    <view>{{__('当好友产生消费时，再获得返利奖励')}}</view>
                </view>
            </view>

            <view class="m-text-box1" v-if="(RuleEnabled&&flag)">
                <rich-text :nodes="htmlString"></rich-text>
            </view>
            <navigator v-if="(ProductInfo==null && isShowBtn && CashData.isShowDistributionButton)" class="u-btn u-btn-default"
                       @click="share">{{__('我也要代言')}}</navigator>
            <navigator class="u-btn u-btn-default" @click="share" v-if="(ProductInfo!=null &&isShowBtn)">{{__('我也要推广')}}</navigator>

            <button v-if="(ProductInfo==null && isShowBtn==false && CashData.isShowDistributionButton)" class="u-btn u-btn-default"
                    @click="onShareBox">{{__('分享赚钱')}}</button>

            <view class="u-tap-btn">
                <navigator url="/pages/index/index" open-type="switchTab" class="u-go-home">
                    <view class="iconfont icon-shouyeshouye"></view>
                </navigator>
            </view>

            <view class="m-msk" v-if="(isShowMag)" @click="closeMsk">
                <image lazy-load mode="widthFix" :src="(imgUrl) + 'share_tips.png'"></image>
            </view>
        </view>
        <navigator url="/pages/index/index" open-type="switchTab" class="m-nullpage" v-if="(CashData.isShowDistributionButton==false&&isShowBtn==false)">
            <view class="m-nullpage-middle">
                <view class="m-null-tip">
                    <text>{{__('对不起，您现在还没有分销权限')}}</text>
                    <text>{{__('多多购物有助于获取权限哦。')}}</text>
                </view>
            </view>
        </navigator>

        <share-box-mp :PageQRCodeInfo="PageQRCodeInfo" @cancelShare="cancelShare" @showCodeImg="showCodeImg" @shareQRCode="shareQRCode"
                      @saveImg="saveImg"></share-box-mp>
        <share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>

    </view>
</template>

<script>
    import shareBoxMp from '../../components/share-box-mp.vue'
    import shareBoxApp from '../../components/share-box-app.vue'

    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        data() {
            return {
                options: {},
                invite_info: {},
                UserInfo: {},
                isShowBtn: false,
                ProductInfo: null,
                isShowMag: false,
                Level1Discount: 0,
                Level2Discount: 0,
                imgUrl: "",
                ProductUrl: "",
                StoreName: "",
                StoreLogo: "",
                buyname: "",
                PromotionRule: "",
                htmlString: "",
                RuleEnabled: true,
                flag: true,
                CashData: {},
                shareData:{}
            };
        },

        components: {
            shareBoxMp,
            shareBoxApp
        },
        computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
        onLoad: function(options) {
            uni.setNavigationBarTitle({
                title:this.__('粉丝排行榜')
            });


            var that = this;
            this.getPlantformInfo(function(site) {
                that.setData({
                    StoreName: site.name,
                    StoreLogo: site.logo,
                });
            });


            this.setData({
                options: options
            })

            that.$.isNull(options.type) ? this.setData({
                ProductUrl: "/pagesub/product/detail",
                buyname: "去购买"
            }) : this.setData({
                ProductUrl: "/pagesub/product/detail",
                buyname: "去预约"
            });

            /*
			that.$.getCache("isShowMag", function(e) {},
				function() {
					that.$.setCache("isShowMag", "true", function() {
						that.setData({
							isShowMag: true
						})
					})
				});
                */

            if (that.$.isNull(this.userInfo)) {
                this.forceUserInfo(function(user) {
                    if (user) {
                        that.setData({
                            isShowBtn: that.$.isNull(options.uid) ? false : true
                        });
                        that.showButton();
                        that.getPageInfo(that.$.isNull(options.uid) ? that.userInfo.user_id : options.uid)
                    }
                });

            } else {
                this.setData({
                    isShowBtn: that.$.isNull(options.uid) ? false : true
                });
                this.showButton();
                this.getPageInfo(that.$.isNull(options.uid) ? this.userInfo.user_id : options.uid);

                if (that.$.isNull(options.pid)) {
                    that.$.setNavigationBarTitle({
                        title: "我要代言"
                    });
                } else {
                    that.$.setNavigationBarTitle({
                        title: "我要推广"
                    });

                    this.setData({
                        ProductInfo: options
                    })

                    this.getPlantformInfo(function(site) {
                        that.setData({
                            flag: true,
                            RuleEnabled: site.promotion
                        });

                        that.htmlString = site.promotion.replace(/\\/g, "").replace(/<img/g,
                            "<img style=\"display:none;\"");
                    });
                }
            }
        },

        onBackPress() {
            if (this.$refs.shareBoxApp.showBoxView) {
                this.$refs.shareBoxApp.cancel();
                return true;
            }
        },
        onUnload() {
            if (this.$refs.shareBoxApp.showBoxView) {
                this.$refs.shareBoxApp.cancel()
            }
        },
        onNavigationBarButtonTap(e) {
            var that = this;

            if (e.index === 0) {
                that.onShareBox();
                /*
                that.setData({
                    shareBoxFlag: 1,
                    shareContetnFlag: 1
                })
                */
            } else {
                uni.showToast({
                    title: "你点了收藏按钮",
                    icon: "none"
                })
            }
        },
        methods: {
            ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

            showButton: function() {
                var that = this,
                    paremt = {
                        user_id: this.userInfo.user_id
                    };
                that.setData({
                    CashData: {
                        isShowDistributionButton: true
                    }
                });
            },
            onShareAppMessage: function() {
                let that = this;
                this.setData({
                    isShowMag: false
                });
                var e, t, n;
                return that.$.isNull(this.ProductInfo) ? (e = "/member/fans/endorsement?uid=" + this.UserInfo.Id, t = this.UserInfo.user_nickname +
                    "偷偷的告诉你，粉丝也能赚钱哦~") : (e = "/member/fans/endorsement?pid=" + this.ProductInfo.pid + "&pname=" + this.ProductInfo.pname +
                    "&pprice=" + this.ProductInfo.pprice + "&ppic=" + this.ProductInfo.ppic + "&uid=" + this.UserInfo.Id + "&type=" +
                    this.ProductInfo.type, t = "我发现这个商品很好，非常适合你哦！"), {
                    title: t,
                    desc: t,
                    path: e
                }
            },
            share: function() {
                this.getPageInfo(this.userInfo.user_id);
                this.setData({
                    isShowBtn: false
                })
            },
            getPageInfo: function(e) {
                var that = this,
                    params = {
                        user_id: e,
                        path: "pages/index/index?uid=" + e,
                        width: 430
                    };
                that.setData({
                    Level1Discount: this.shopInfo.Level1Discount,
                    Level2Discount: this.shopInfo.Level2Discount,
                    imgUrl: this.shopInfo.ShopConfig.AppIconPath
                });

                //生成二维码并返回地址。 - 需要修改调整为小程序地址
                that.$.request({
                    url: this.Config.URL.fx.invite,
                    data: params,
                    success: function(data, status, msg, code) {
                        if (200 == status) {
                            that.setData({
                                invite_info: data.invite_info
                            });
                        } else {
                            that.setData({
                                flag: false,
                                ispage: false
                            })
                        }
                    }
                });

                that.$.request({
                    url: this.Config.URL.user.overview,
                    data: params,
                    success: function(data, status, msg, code) {
                        if (200 == status) {
                            that.setData({
                                UserInfo: data.member_info,
                                UserBase: data.base
                            });
                        }
                    }
                });
            },
            closeMsk: function() {
                this.setData({
                    isShowMag: false
                })
            },
            onShareBox: function(e) {
                let that = this;
                // 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
                // #ifdef APP-PLUS
                var $href = that.$.sprintf('%s/tmpl/index.html?FX=%d', this.Config.WapSiteUrl, this.userInfo
                    .user_id);
                $href = that.$.sprintf('%s/h5/pages/index/index?uid=%d', that.Config.SiteUrl, this.userInfo.user_id);
                // #endif
                // #ifdef MP-WEIXIN
                var $href = "/pages/index/index?uid=" + this.userInfo.user_id;
                // #endif


                var path, title, image;


                if (that.$.isNull(this.ProductInfo))
                {
                    path = "/member/fans/endorsement?uid=" + this.userInfo.user_id;
                    title = this.userInfo.user_nickname + "偷偷的告诉你，粉丝也能赚钱哦~";
                    image = this.StoreLogo;
                }
                else
                {
                    path = "/member/fans/endorsement?pid=" + this.ProductInfo.pid + "&pname=" + this.ProductInfo.pname +
                        "&pprice=" + this.ProductInfo.pprice + "&ppic=" + this.ProductInfo.ppic + "&uid=" + this.userInfo.user_id + "&type=" +
                        this.ProductInfo.type;

                    title = "我发现这个商品很好，非常适合你哦！"
                    image = this.ProductInfo.ppic;
                }

                this.setData({
                    shareData: {
                        shareTitle: title,
                        shareText: title,
                        href: $href,
                        image: image
                    }
                });

                this.$refs.shareBoxApp.show()
            }
        }
    }
</script>

<style lang="scss">
    @import "../../styles/_variables";

    page {
        background-color: #fff;
    }

    .u-loadmore {
        margin: 60rpx auto 0 auto;
    }

    .u-loadmore-tips {
        background-color: #fff !important;
    }

    .m-endorsementBox {
        width: 100%;
        overflow: hidden;
        height: 240rpx;
        position: relative;
        text-align: center;
    }

    .m-endorsementBox-bg {
        height: 940rpx;
        width: 940rpx;
        background-color: #1e1c1d;
        -webkit-border-radius: 940rpx / 320rpx;
        border-radius: 940rpx / 320rpx;
        margin: 0 auto;
        margin-top: -700rpx;
        margin-left: -100rpx;
        position: relative;
    }

    .m-userinfo-bg {
        bottom: 20rpx;
        width: 400rpx;
    }

    .m-userinfo {
        z-index: 2;
        position: relative;
        display: inline-block;
        position: relative;
        top: -180rpx;
    }

    .m-userinfo .m-photo {
        width: 124rpx;
        height: 124rpx;
        float: left;
    }

    .m-photo image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }

    .m-text {
        float: left;
        text-align: left;
        line-height: 40rpx;
        margin-top: 22rpx;
        margin-left: 20rpx;
    }

    .m-text {
        font-size: 24rpx;
        color: #eebe8c;
    }

    .m-text label {
        font-size: 32rpx;
        font-weight: bold;
    }

    .m-text text {
        display: block;
    }

    .m-product-info::before {
        content: "";
        border: none;
    }

    .u-btn {
        margin-top: 80rpx;
    }

    .u-tip-text {
        display: block;
        font-size: 28rpx;
        text-align: center;
        color: $default-skin-bg
    }

    .m-product-price .u-btn {
        margin: 0;
        float: right;
        width: 160rpx;
        height: 60rpx;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-top: -30rpx;
    }

    .QRCodeBOx {
        width: 300rpx;
        display: block;
        margin: 20rpx auto;
    }

    .u-tap-btn {
        position: fixed;
        right: 20rpx;
        bottom: 150rpx;
    }

    .u-go-home {
        border-radius: 100%;
        width: 80rpx;
        height: 80rpx;
        border: 1px solid #eee;
        font-size: 20rpx;
        text-align: center;
        background-color: #fff;
        box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
        z-index: 2;
        opacity: 0.8;
        line-height: 80rpx;
        margin-bottom: 20rpx;
    }

    .u-go-home .iconfont {
        font-size: 40rpx;
    }

    .m-text-box {
        font-size: 24rpx;
        box-sizing: border-box;
        padding: 20rpx;
        color: #888;
        line-height: 40rpx;
    }

    .m-text-box label {
        padding-right: 10rpx;
    }

    .m-text-box1 {
        box-sizing: border-box;
        padding: 20rpx 36rpx;
        color: #888;
        line-height: 40rpx;
    }

    .m-text-box1 label {
        padding-right: 10rpx;
        font-size: 24rpx
    }

    .m-msk {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        top: 0;
        left: 0;
        z-index: 10;
    }

    .m-msk image {
        position: fixed;
        right: 30rpx;
        top: 0;
        width: 300rpx;
    }
</style>
